<template>
    <div>
        <div class="crumbs">
            <!-- <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <div class="contentsize">新订合同</div>
                </el-breadcrumb-item>
            </el-breadcrumb> -->
            <div class="contentbox">
                <div class="contentsize">新订合同编辑</div>
                <div>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">

            <div class="addtitle">房屋信息</div>
            <div class="detailcontent">
                <!-- scope.row.beginTime == null ? '' : scope.row.beginTime.trim().split(' ')[0] -->
                <div class="detailitem1">{{ projectdetail.fwdz }}</div>
                <div class="detailitem">所属部门：{{ projectdetail.ssbm }}</div>
                <div class="detailitem">管理单位：{{ projectdetail.gldw }}</div>
                <div class="detailitem">房屋性质：{{ projectdetail.fwxz }}</div>
                <div class="detailitem">产权类型：{{ projectdetail.cqlx }}</div>
                <div class="detailitem">产权单位：{{ projectdetail.cqdw }}</div>
                <div class="detailitem">建筑年代：{{ projectdetail.jznd }}</div>
                <div class="detailitem">建筑面积：{{ projectdetail.jzmj }}</div>
                <div class="detailitem">使用面积：{{ projectdetail.symj }}</div>
                <div class="detailitem">管理形式：{{ projectdetail.glxs }}</div>
                <div class="detailitem">总层数：{{ projectdetail.zcs }}</div>
                <div class="detailitem">所在层数：{{ projectdetail.szcs }}</div>
                <div class="detailitem"></div>
            </div>
            <div class="addtitle">租户信息</div>
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top" :rules="rules">
                <el-form-item label="客户姓名:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入客户姓名" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="手机号:" style="width: 30%" prop="beginTime">
                    <el-input v-model="form.address" placeholder="请输入手机号" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="证件名称:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入证件名称" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="证件号码:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入证件号码" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="联系地址:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入联系地址" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="其他联系电话:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入其他联系电话" class="search-input"></el-input>
                </el-form-item>
                <!-- <div class="buttonCenter">
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">取消</el-button>
                </div> -->
            </el-form>
            <div class="addtitle">合同信息</div>
            <div class="addtitle">入住信息</div>
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top" :rules="rules">
                <el-form-item label="水表:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入水表" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="电表:" style="width: 30%" prop="beginTime">
                    <el-input v-model="form.address" placeholder="请输入电表" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="燃气表:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入燃气表" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="年度供热费:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入年度供热费" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="物业费:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入物业费" class="search-input"></el-input>
                </el-form-item>
                <!-- 是否支持多文进上传 multiple -->
                <el-upload class="upload-demo" :action="httpUrl + '/upFile/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
            </el-form>
            <div class="addtitle">终止合同</div>
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top" :rules="rules">
                <el-form-item label="水表:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入水表" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="电表:" style="width: 30%" prop="beginTime">
                    <el-input v-model="form.address" placeholder="请输入电表" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="燃气表:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入燃气表" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="年度供热费:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入年度供热费" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="物业费:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入物业费" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="终止时间:" style="width: 30%" prop="address">
                    <el-date-picker type="date" placeholder="选择终止时间" v-model="form.beginTime" style="width: 100%"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="终止原因:" style="width: 100%" prop="address">
                    <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入终止原因" v-model="form.bz">
                    </el-input>
                </el-form-item>
                <!-- 是否支持多文进上传 multiple -->
                <el-upload class="upload-demo" :action="httpUrl + '/upFile/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
            </el-form>
            <div class="addtitle">办理退租</div>
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top" :rules="rules">
                <el-form-item label="水表:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入水表" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="电表:" style="width: 30%" prop="beginTime">
                    <el-input v-model="form.address" placeholder="请输入电表" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="燃气表:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入燃气表" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="年度供热费:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入年度供热费" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="物业费:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入物业费" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="退租时间:" style="width: 30%" prop="address">
                    <el-date-picker type="date" placeholder="选择退租时间" v-model="form.beginTime" style="width: 100%"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="退租原因:" style="width: 100%" prop="address">
                    <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入退租原因" v-model="form.bz">
                    </el-input>
                </el-form-item>
                <!-- 是否支持多文进上传 multiple -->
                <el-upload class="upload-demo" :action="httpUrl + '/upFile/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
            </el-form>
        </div>
    </div>
</template>
<script>
import { projectadd } from '@/api/index';
import global from '@/components/common/httpurl.vue'
export default {
    name: 'addht',
    data() {
        return {
            httpUrl: global.httpUrl,//公共地址
            qslist: [
                {
                    value: "和平区",
                    label: "和平区",
                },
                {
                    value: "河西区",
                    label: "河西区",
                },
                {
                    value: "南开区",
                    label: "南开区",
                },
                {
                    value: "河东区",
                    label: "河东区",
                },
                {
                    value: "河北区",
                    label: "河北区",
                },
                {
                    value: "红桥区",
                    label: "红桥区",
                },
                {
                    value: "东丽区",
                    label: "东丽区",
                },
                {
                    value: "西青区",
                    label: "西青区",
                },
                {
                    value: "津南区",
                    label: "津南区",
                },
                {
                    value: "北辰区",
                    label: "北辰区",
                },
                {
                    value: "滨海新区",
                    label: "滨海新区",
                },
                {
                    value: "蓟州区",
                    label: "蓟州区",
                },
                {
                    value: "静海区",
                    label: "静海区",
                },
                {
                    value: "宝坻区",
                    label: "宝坻区",
                },
                {
                    value: "宁河区",
                    label: "宁河区",
                },
                {
                    value: "武清区",
                    label: "武清区",
                },
            ],//区属
            cblist: [{ name: '全部', code: '全部' }, { name: '直管公产', code: '直管公产' }, { name: '单位产', code: '单位产' }],//产别
            qzlxlist: [{ name: '全部', code: '全部' }, { name: '直管公产', code: '直管公产' }, { name: '单位产', code: '单位产' }],//权证类型
            tdsyqlxlist: [{ name: '全部', code: '全部' }, { name: '直管公产', code: '直管公产' }, { name: '单位产', code: '单位产' }],//土地使用权类型
            sflist: [{ name: '是', code: '是' }, { name: '否', code: '否' }],//是否列表
            jzxslist: [{ name: '楼房', code: '楼房' }, { name: '平房', code: '平房' }],//建筑形式列表
            fwjglist: [{ name: '钢混结构', code: '钢混结构' }, { name: '砖混结构', code: '砖混结构' }, { name: '砖木结构', code: '砖木结构' }, { name: '简易结构', code: '简易结构' }],//房屋结构列表
            gfdwlist: [{ name: '全部', code: '全部' }, { name: '房产经理部', code: '房产经理部' }, { name: '经租资产管理部', code: '经租资产管理部' }],//管房单位
            filefileList: [],//文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            form: {
                address: '', //项目地址 ,
                beginTime: '', //开工时间 ,
                chargenameA: '', //甲方项目负责人 ,
                chargenameB: '', //乙方负责人 ,
                company: '', //乙方公司名 ,
                completionTime: '', //竣工时间 ,
                create_name: localStorage.getItem('username'), //创建人 ,
                create_name_id: localStorage.getItem('userid'), //创建人id ,
                create_time: '', //创建时间 ,
                fileinfo: '', //,
                id: '', //,
                name: '', // 项目名称 ,
                phoneA: '', //甲方负责人电话 ,
                phoneB: '', //乙方负责人电话 ,
                status_code: '', //1正常 2删除 ,
                update_name: localStorage.getItem('username'), //修改人 ,
                update_name_id: localStorage.getItem('userid'), //修改人id ,
                update_time: '' //修改时间
            },
            fileList: [],
            projectdetail: { fwdz: '河西区桃园街湛江新村16号楼3门502', ssbm: '天津市房产管理服务中心', gldw: '天津市房产管理服务中心', fwxz: '住宅' },
            rules: {
                name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                address: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
                beginTime: [{ type: 'date', required: true, message: '请选择开工时间', trigger: 'change' }],
                completionTime: [{ type: 'date', required: true, message: '请选择计划竣工时间', trigger: 'change' }],

                chargenameB: [{ required: true, message: '请输入乙方负责人', trigger: 'blur' }],
                phoneB: [
                    { required: true, message: '请输入乙方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ],
                company: [{ required: true, message: '请输入乙方公司名称', trigger: 'blur' }],
                chargenameA: [{ required: true, message: '请输入甲方项目负责人', trigger: 'blur' }],
                phoneA: [
                    { required: true, message: '请输入甲方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ]
            }
        };
    },
    methods: {
        // 创建
        submitForm() {
            projectadd(this.form).then((res) => {
                if (res.code == 200) {
                    this.$message.success('创建成功');
                    this.$router.push({
                        name: 'dashboard',
                        path: '/dashboard'
                    });
                } else {
                    this.$message.error('创建失败');
                }
            });

            console.log('提交确定');
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.form.fileinfo = this.fileListshandle.toString()

        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.form.fileinfo = this.fileListshandle.toString()
        }
    },
    created() {
        console.log(global.httpUrl)
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008A94;
}
</style>